'use client';

import { useState, useEffect } from 'react';
import { RiAddLine, RiEditLine, RiDeleteBinLine } from '@remixicon/react';

interface ChatSession {
  id: string;
  title: string;
  lastMessage: string;
  timestamp: number;
  messageCount: number;
}

interface ChatSessionListProps {
  currentSessionId?: string;
  onSessionSelect: (sessionId: string) => void;
  onNewSession: () => void;
  onDeleteSession: (sessionId: string) => void;
  onRenameSession: (sessionId: string, newTitle: string) => void;
}

export default function ChatSessionList({
  currentSessionId,
  onSessionSelect,
  onNewSession,
  onDeleteSession,
  onRenameSession,
}: ChatSessionListProps) {
  const [sessions, setSessions] = useState<ChatSession[]>([]);
  const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
  const [editTitle, setEditTitle] = useState('');

  // 模拟从本地存储加载会话
  useEffect(() => {
    const loadSessions = () => {
      const savedSessions = localStorage.getItem('chatSessions');
      if (savedSessions) {
        setSessions(JSON.parse(savedSessions));
      }
    };
    loadSessions();
  }, []);

  // 保存会话到本地存储
  useEffect(() => {
    localStorage.setItem('chatSessions', JSON.stringify(sessions));
  }, [sessions]);

  const handleStartEdit = (session: ChatSession) => {
    setEditingSessionId(session.id);
    setEditTitle(session.title);
  };

  const handleSaveEdit = (sessionId: string) => {
    if (editTitle.trim()) {
      onRenameSession(sessionId, editTitle.trim());
      setSessions(prev =>
        prev.map(session =>
          session.id === sessionId
            ? { ...session, title: editTitle.trim() }
            : session
        )
      );
    }
    setEditingSessionId(null);
    setEditTitle('');
  };

  return (
    <div className="flex flex-col h-full">
      {/* 新建会话按钮 */}
      <button
        onClick={onNewSession}
        className="flex items-center justify-center gap-2 p-4 hover:bg-gray-100 transition-colors"
      >
        <RiAddLine className="w-5 h-5" />
        <span>新建会话</span>
      </button>

      {/* 会话列表 */}
      <div className="flex-1 overflow-y-auto">
        {sessions.map(session => (
          <div
            key={session.id}
            className={`p-3 hover:bg-gray-100 cursor-pointer ${
              currentSessionId === session.id ? 'bg-gray-100' : ''
            }`}
          >
            <div className="flex items-center justify-between">
              {editingSessionId === session.id ? (
                <input
                  type="text"
                  value={editTitle}
                  onChange={e => setEditTitle(e.target.value)}
                  onBlur={() => handleSaveEdit(session.id)}
                  onKeyDown={e => {
                    if (e.key === 'Enter') {
                      handleSaveEdit(session.id);
                    }
                  }}
                  className="flex-1 px-2 py-1 border rounded"
                  autoFocus
                />
              ) : (
                <div
                  className="flex-1"
                  onClick={() => onSessionSelect(session.id)}
                >
                  <div className="font-medium">{session.title}</div>
                  <div className="text-sm text-gray-500 truncate">
                    {session.lastMessage}
                  </div>
                </div>
              )}

              <div className="flex items-center gap-2">
                <button
                  onClick={() => handleStartEdit(session)}
                  className="p-1 hover:bg-gray-200 rounded"
                >
                  <RiEditLine className="w-4 h-4" />
                </button>
                <button
                  onClick={() => onDeleteSession(session.id)}
                  className="p-1 hover:bg-gray-200 rounded"
                >
                  <RiDeleteBinLine className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
} 